<template>
	<div class="magazine-slide-img">
    <div class="padding-box" :style="this.styleObj">
      <ul :style="{'width':tplItemData.Uwidth+'px'}" class="magazine-img-box clearfix">
        <li :class="'col'+tplItemData.Ulength" v-for="(item, index) in advList" :key="index">
          <a @click="openLink(item.link)" class="slideNav-img">
            <img :src="item.pic" />
          </a>
        </li>
			</ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  name: 'index',
  data() {
    return {
      advList: [],
      styleObj: {}
    }
  },

  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  created() {
    this.advList = this.tplItemData.dataset
    this.styleObj.padding = this.tplItemData.modulePadding + 'px ' + (this.tplItemData.levelPadding ? this.tplItemData.levelPadding : '0') + 'px'
    this.styleObj.background = this.tplItemData.backgroundColor ? this.tplItemData.backgroundColor : ''
  },
  methods: {
    openLink(link) {
      openPage(link)
    }
  }
})
</script>

<style lang='scss'>
.magazine-slide-img{
  overflow: hidden;
  .padding-box{
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 40px;
    .magazine-img-box{
      li{
        float: left;
        width: 260px;
        margin-right: 10px;
        font-size:0;
        &.col4{
          width:260px;
        }
        &.col3{
          width:31%;
        }
        &.col2{
          width:40%;
        }
        &.col1{
          width:80%;
        }
        img{
          width:100%
        }
      }
    }
  }
}
</style>
